<template>
  <div class="app-container">

    <div>
      <el-card class="flex border">
         <el-input v-model="search" placeholder="请输入指标名称或编码"  clearable prefix-icon="Search" ></el-input>
         <div>指标类型: </div>
         <el-button :type="selectedButton === 'Weekbtn' ? 'primary' : 'info'" @click="handleButtonClick('Weekbtn')">本周</el-button>
         <el-button :type="selectedButton === 'Monthbtn' ? 'primary' : 'info'" @click="handleButtonClick('Monthbtn')">本月</el-button>
         <el-button :type="selectedButton === 'Yearbtn' ? 'primary' : 'info'" @click="handleButtonClick('Yearbtn')">全年</el-button>
      </el-card>
    </div>

       <div>
         <el-card>
        <div class="title">三级公立医院绩效考核指标</div>
        <el-table :data="tableData" >
          <el-table-column prop="name" label="指标名称" align="left"></el-table-column>
          <el-table-column prop="formula" label="计算公式" align="left">
            <template #default="scope">
              <div>分子：{{ scope.row.molecule }}</div>
              <div>分母：{{ scope.row.denominator }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="displayType" label="展示方式" align="left">
            <template #default="scope">
              <el-tag :type="scope.row.displayType === '柱状图' ? 'primary' : 'success'">{{ scope.row.displayType }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template #default="scope">
              <el-button link icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button link icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
       </div>

       <div>
         <el-card>
           <div class="title">二级公立医院绩效考核指标</div>
           <el-table :data="tableData" >
             <el-table-column prop="name" label="指标名称" align="left"></el-table-column>
             <el-table-column prop="formula" label="计算公式" align="left">
               <template #default="scope">
                 <div>分子：{{ scope.row.molecule }}</div>
                 <div>分母：{{ scope.row.denominator }}</div>
               </template>
             </el-table-column>
             <el-table-column prop="displayType" label="展示方式" align="left">
               <template #default="scope">
                 <el-tag :type="scope.row.displayType === '柱状图' ? 'primary' : 'success'">{{ scope.row.displayType }}</el-tag>
               </template>
             </el-table-column>
             <el-table-column label="操作" width="150" align="center">
               <template #default="scope">
                 <el-button link icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                 <el-button link icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
         </el-card>
       </div>

      <div>
        <el-card>
          <div class="title">指标图表库</div>
          <div class="flex">
            <EchartsComponent :options="chartOptions[0]" class="charts-common flex-auto padding-20" style="margin-right: 10px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);"></EchartsComponent>
            <EchartsComponent :options="chartOptions[1]" class="charts-common flex-auto padding-20" style="margin-left: 10px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);"></EchartsComponent>
          </div>
        </el-card>
      </div>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
const search = ref("");
const tableData = ref([
  {
    name: '医疗质量安全指标',
    molecule:"医疗质量达标病例数",
    denominator:"总病例数",
    displayType: '柱状图'
  },
  {
    name: '医疗服务效率指标',
    molecule:"日均诊疗人次",
    denominator:"医师人数",
    displayType: '折线图'
  }
]);
const selectedButton = ref('Yearbtn');
const handleEdit= (index, row) => {
  console.log(index, row);
};
const handleDelete= (index, row) => {
  console.log(index, row);
};
const chartOptions = ref([
  {
    title: {text: '出院患者手术类型占比'},
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical', // 图例垂直排列
      left: 'right', // 图例放置在右侧
      top: 'center', // 图例垂直居中

    },
    series: [
      {
        name: '出院患者手术类型',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 22,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: [
          {value: 1048, name: '常规手术'},
          {value: 735, name: '日间手术'},
          {value: 580, name: '微创手术'},
          {value: 484, name: '四级手术'}
        ]
      }
    ]
  },
  {

    legend: { right: '20',icon: 'circle', orient: 'vertical'},
    title: {text: '日间手术占择期手术比例'},
    tooltip: {},
    dataset: {
      dimensions: ['product', '日间手术台数', '择期手术总台次数'],
      source: [
        { product: '一月', '日间手术台数': 43.3, '择期手术总台次数': 85.8 },
        { product: '二月', '日间手术台数': 83.1, '择期手术总台次数': 73.4 },
        { product: '三月', '日间手术台数': 86.4, '择期手术总台次数': 65.2 },
        { product: '四月', '日间手术台数': 72.4, '择期手术总台次数': 53.9 },
        { product: '五月', '日间手术台数': 43.3, '择期手术总台次数': 85.8 },
        { product: '六月', '日间手术台数': 83.1, '择期手术总台次数': 73.4 },
        { product: '七月', '日间手术台数': 86.4, '择期手术总台次数': 65.2 },
        { product: '八月', '日间手术台数': 72.4, '择期手术总台次数': 53.9 },
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar',color:'#3D8BFF' }, { type: 'bar',color:'#9CB0D9' }]
  }
]);
</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
    border-radius: 13px;
    border: none;
    margin-top: 20px;
    padding: 20px;
  }
  .title {
    font-size: 18px;
    font-weight: 600;
    padding: 10px 0;
    margin-bottom: 10px;
  }
  .charts-common {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    height: 300px;
  }
  .sub-title{
    color: #464646;
    font-size: 20px;
    margin: 10px 0;
    font-weight: bolder;
  }

}
</style>
